import { VersionCheckerService } from './core/services/version-checker.service';
import { Component, ViewEncapsulation, ChangeDetectionStrategy,ElementRef,ViewChild,Renderer2 } from '@angular/core';
import { EchoesState, getSidebarCollapsed$ } from './core/store';
import { Store } from '@ngrx/store';
import 'rxjs/add/operator/let';
import { animate, state, style, transition, trigger } from '@angular/animations';


@Component({
  selector: 'app-root',
  encapsulation: ViewEncapsulation.None,
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  animations: [
    trigger('fadeInOutTranslate', [
      state('in', style({ display: 'block', opacity: 1, top: '42px' })),
      state('out', style({ display: 'none', opacity: 0, top: '-10px' })),
      transition('in<=>out', [
        animate(0)
      ]),
    ]),
  ],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent {

  @ViewChild('btnbuttlets')
  private btnbuttlet: ElementRef;

  @ViewChild('buttlets')
  private buttlets: ElementRef;

   constructor(private rd:Renderer2) {
   }

  stateString: String = 'out';
  stateString1: String = 'out';
  stateString2: String = 'out';

  popMenu(value: any) {
    if (value == 0) {
      this.stateString = 'in';
    }
    if (value == 1) {
      this.stateString1 = 'in';
    }
    if (value == 2) {
      this.stateString2 = 'in';
    }
  }

  hideMenu(value: any) {
    if (value == 0) {
      this.stateString = 'out';
    }
    if (value == 1) {
      this.stateString1 = 'out';
    }
    if (value == 2) {
      this.stateString2 = 'out';
    }
  }

  onCarouse(data:any){
    for (let i = 0; i <= 2; i++) {
      this.rd.removeClass(this.buttlets.nativeElement.children[i], 'swiper-slide-active');
      this.rd.removeClass(this.btnbuttlet.nativeElement.children[i], 'swiper-pagination-bullet-active');
      this.rd.setStyle(this.buttlets.nativeElement.children[i], 'opacity', 0);
    }
    if (data === 1) {
      this.rd.addClass(this.btnbuttlet.nativeElement.children[0], 'swiper-pagination-bullet-active');
      this.rd.addClass(this.buttlets.nativeElement.children[0], 'swiper-slide-active');
      this.rd.setStyle(this.buttlets.nativeElement.children[0], 'opacity', 1);
    }
    if (data === 2) {
      this.rd.addClass(this.btnbuttlet.nativeElement.children[1], 'swiper-pagination-bullet-active');
      this.rd.addClass(this.buttlets.nativeElement.children[1], 'swiper-slide-active');
      this.rd.setStyle(this.buttlets.nativeElement.children[1], 'opacity', 1);
    }
    if (data === 3) {
      this.rd.addClass(this.btnbuttlet.nativeElement.children[2], 'swiper-pagination-bullet-active');
      this.rd.addClass(this.buttlets.nativeElement.children[2], 'swiper-slide-active');
      this.rd.setStyle(this.buttlets.nativeElement.children[2], 'opacity', 1);
    }
  }

}
